<template>
  <!--图标容器-->
  <div id="ecahts-container" :style="{width: '600px', height: '300px'}"></div>
</template>


<style>

</style>

<script>

import extend from './js/extend';
// 引入echats依赖
import echarts from 'echarts';
extend(echarts)
export default {
  mounted: function () {
    this.init()
  },
  methods: {
    init: function rainfall () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('ecahts-container'), 'essos')

	// 指定图表的配置项和数据

	let option = {
        title: {
          left: 'center',
          text: ''


        },
        tooltip: {
          trigger: 'axis'

        },
        legend: {
          data: ['水位线', '保证水位', '警戒水位', '设防水位'],
          left: '10%',
          top: '8%'
        },
        // toolbox: {
        //   show: true,
        //   top: '7%',
        //   right: '4%',
        //   feature: {
        //     mark: {
        //       show: true
        //     },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true
			}
			// ,
            // dataZoom: {
            //   show: false,
            //   yAxisIndex: 1
            // }
          }
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
          nameLocation: 'end',
          name: '时间(h)'

        }],
        yAxis: [{
          type: 'value',
          nameLocation: 'middle',
          name: '水位(m)',
          nameGap: 15,
          min: 15
        }],

        // dataZoom: [{
        //   type: 'slider',
        //   show: false,
        //   xAxisIndex: [0],
        //   start: 1,
        //   end: 50
        // },
        // {
        //   type: 'slider',
        //   show: true,
        //   yAxisIndex: [0],
        //   left: '93%',
        //   start: 40,
        //   end: 100
        // },
        // {
        //   type: 'inside',
        //   xAxisIndex: [0],
        //   start: 1,
        //   end: 24
        // },
        // {
        //   type: 'inside',
        //   yAxisIndex: [0],
        //   start: 15,
        //   end: 24
        // }
        // ],

        series: [{
          name: '水位线',
          type: 'line',
          smooth: true,
          data: [23.1, 17.1, 21.5, 19.1, 21.3, 25.1, 18.1]
        },
        {
          name: '设防水位',
          type: 'line',
          smooth: true,
          data: [24.1, 24.1, 24.1, 24.1, 24.1, 24.1, 24.1]
        },
        {
          name: '警戒水位',
          type: 'line',
          smooth: true,
          data: [20.1, 20.1, 20.1, 20.1, 20.1, 20.1, 20.1]
        },
        {
          name: '保证水位',
          type: 'line',
          smooth: true,
          data: [15.3, 15.3, 15.3, 15.3, 15.3, 15.3, 15.3]

        }

        ]
      }

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option)
}
  },
  data () {
    return {}
  }
}
</script>
